<template>
    <div class="container">
        <div class="container-video">
            <video
                controls
                poster="../../assets/logo.png"
                class="video"
                ref="video"
            ></video>
        </div>

        <div class="container-operation">
            <el-card class="box-card" shadow="always">
                <template #header>
                    <span>视频格式</span>
                </template>
                <el-select
                    v-model="videoType"
                    placeholder="Select"
                    style="width: 100%"
                >
                    <el-option
                        v-for="item in detectionVideoTypes"
                        :key="item"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
            </el-card>

            <el-card class="box-card" shadow="always">
                <template #header>
                    <span>操作</span>
                </template>
                <el-row>
                    <el-radio-group
                        @change="switchCamera"
                        v-model="isOpenMedia.camera"
                        size="small"
                    >
                        <el-radio :label="true" border :disabled="flags.radio"
                            >开启摄像头</el-radio
                        >
                        <el-radio :label="false" border :disabled="flags.radio"
                            >关闭摄像头</el-radio
                        >
                    </el-radio-group>
                </el-row>
                <el-row>
                    <el-radio-group
                        v-model="isOpenMedia.microphone"
                        size="small"
                        @change="switchMicrophone"
                    >
                        <el-radio :label="true" border :disabled="!flags.radio"
                            >开启麦克风</el-radio
                        >
                        <el-radio :label="false" border :disabled="!flags.radio"
                            >关闭麦克风</el-radio
                        >
                    </el-radio-group>
                </el-row>
                <el-row justify="center">
                    <el-col
                        :span="24"
                        style="text-align: center; margin: 10px 0"
                    >
                        <el-button
                            type="primary"
                            @click="startRecord"
                            :disabled="flags.start"
                            >开始</el-button
                        >
                        <el-button
                            type="success"
                            @click="stopRecord"
                            :disabled="flags.stop"
                            >结束</el-button
                        >
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button
                            type="danger"
                            @click="pauseRecord"
                            :disabled="flags.pause"
                            >暂停</el-button
                        >
                        <el-button
                            type="warning"
                            @click="resumeRecord"
                            :disabled="flags.resume"
                            >继续</el-button
                        >
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="container-download">
            <el-card class="box-card" title="Download">
                <template #header>Download List</template>
                <div
                    v-if="!!videoAndDownloadUrl.length"
                    v-for="o in videoAndDownloadUrl"
                    :key="o"
                >
                    <el-link target="_blank" :href="o">{{ o }}</el-link>
                    <hr />
                </div>
                <el-empty v-else description="暂无下载链接"></el-empty>
            </el-card>
        </div>
    </div>
    <video-widget ref="videoWidget"></video-widget>
</template>

<script setup lang="ts">
import { nextTick, Ref, ref } from 'vue'
import {
    startRecord,
    videoAndDownloadUrl,
    stopRecord,
    pauseRecord,
    getScreenPlayerElement,
    getCameraPlayerElement,
    resumeRecord,
    videoType,
    detectionVideoTypes,
    flags,
    isOpenMedia,
    switchMicrophone,
    switchCamera
} from './screen'

import VideoWidget from '../../components/VideoWidget/index.vue'

const video: Ref<HTMLVideoElement | null> = ref(null)
const videoWidget: Ref<null | IVideoWidget> = ref(null)

nextTick(() => {
    getScreenPlayerElement(video as Ref<HTMLVideoElement>)
    getCameraPlayerElement(videoWidget.value!.video)
})
</script>

<style lang="scss" scoped>
@import '../../assets/style/mixin';
.container {
    display: flex;
    padding: 50px 0;
    margin: 0 auto;
    @include WH(90vw, 500px);

    &-video {
        flex: 4;

        .video {
            @include WH(100%, 100%);
        }
    }
    &-operation {
        flex: 2;
    }

    &-download {
        flex: 2;
    }
}
</style>
